<template>
  <div class="article-info">
    <div class="title-warp">
      <div class="title">
         
         <my-text type="primary" strong @click.native="titleClickHandle" style="cursor:pointer" v-show="!isEdit">标题：{{articleTitle}}</my-text> 
        <el-input ref="input" size="mini" v-model="articleTitle" @blur="changeBlurHandle" v-show="isEdit"></el-input>
      </div>
      <div class="date">{{editingArticle.updateTime}}</div>
    </div>
    <div class="tags">
      <el-button type="primary" size="mini" style="margin-right:3px" @click="openTagSelHandle">添加标签</el-button>
        <el-tag style="margin:2px" size="small" v-for="(item, index) in artileTags" :key="`tag_${index}`" closable @close="delTagClick(item, index)">
        {{item.label}}
      </el-tag>
    </div>

    <my-dialog :visible.sync="tagEditVisible" target="body" title="标签添加" width="400px" height="380px"  :footer="false">
      <tag-edit ref="tagEdit" @on-tagSelected="tagSelectedHandle"></tag-edit>
    </my-dialog>
  </div>
</template>
<style lang="scss" scoped>
.article-info{
  padding: 5px 10px;
  .title-warp{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-bottom: 4px;
    .title{
      flex: 1;
      
      margin-right: 10px;
    }
    .date{
      color: #003a8c;
    }
  }
}
</style>
<script>
import TagEdit from '@/components/article/tag-edit'
export default {
  mixins: [],
  components: {
    TagEdit
  },
  props: {
    editingArticle: {
      type: Object
    }
  },
  data() {
    return {
      isEdit: false,
      articleTitle: '',
      
      tagEditVisible: false,
      artileTags: []
    }
  },
  computed: {
  },
  methods: {
    titleClickHandle(e) {
      console.log(e, this)
      this.isEdit = true
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    },
    changeBlurHandle() {
      this.isEdit = false
      if (this.articleTitle !== this.editingArticle.title) {
        this.$emit('on-infoChange', {
          title: this.articleTitle,
          tags: this.artileTags
        })
      }
    },
    openTagSelHandle() {
      this.tagEditVisible = true
      console.log(this.artileTags)
      this.$nextTick(() => {
        this.$refs.tagEdit.setSelectTags(this.artileTags.map((item) => { return item.id }))
      })
    },
    delTagClick(tag, index) {
      this.artileTags.splice(index, 1)
      this.compareTags()
    },
    tagSelectedHandle(tags) { 
      this.artileTags = tags
      this.tagEditVisible = false
      this.compareTags()
    },
    compareTags() {
      const newTagsId = this.artileTags.map((item) => { return item.id }).join(',')
      const oldTagsId = this.editingArticle.tags.map((item) => { return item.id }).join(',')
    
      if (newTagsId !== oldTagsId) {
        this.$emit('on-infoChange', {
          title: this.articleTitle,
          tags: this.artileTags
        })
      }
    },
    getEditData() {
      return {
        title: this.articleTitle ? this.articleTitle : this.editingArticle.title,
        tags: this.artileTags.map((item) => { return item.id })
      }
    }
  },
  created() {
    this.articleTitle = this.editingArticle.title
    this.artileTags = JSON.parse(JSON.stringify(this.editingArticle.tags))
  },
  mounted() {}
}
</script>